<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>最大的ikun门户网站</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
      </ul>
    </div>
  </div>

  <script>
    // 拿到第一个和第二个li
    const li1 = document.querySelector('.xtx_navs li:nth-child(1)')
    const li2 = li1.nextElementSibling

    function render(){
      if(localStorage.getItem('user')){
        li1.innerHTML = `
        <a href="javascript:;"><i class="iconfont icon-user">${localStorage.getItem('user')}</i></a>
        `
        li2.innerHTML = '<a href="javascript:;">退出登录</a>'
      }else{
        li1.innerHTML = '<a href="./login.html">请先登录</a>'
        li2.innerHTML = '<a href="./register.html">免费注册</a>'
      }
    }
    render()

    // 退出登录
    li2.addEventListener('click', function(){
      localStorage.removeItem('user')
      render()
    })

  </script>
</body>

</html>